<template>
	<view class="content">
		<view class="spwBox">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
							:duration="duration">
			<swiper-item>
				<view class="swiper-item ">
					<image src="../../static/img/2.jpg" mode="aspectFill" class="swiperImg"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-itemn">
					<image src="../../static/img/3.jpg" mode="aspectFill" class="swiperImg"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-itemn">
					<image src="../../static/img/4.png" mode="aspectFill" class="swiperImg"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-itemn">
					<image src="../../static/sp/1.jpg" mode="aspectFill" class="swiperImg"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-itemn">
					<image src="../../static/sp/2.jpg" mode="aspectFill" class="swiperImg"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-itemn">
					<image src="../../static/sp/3.jpg" mode="aspectFill" class="swiperImg"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-itemn">
					<image src="../../static/sp/4.jpg" mode="aspectFill" class="swiperImg"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-itemn">
					<image src="../../static/sp/5.jpg" mode="aspectFill" class="swiperImg"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-itemn">
					<image src="../../static/sp/6.jpg" mode="aspectFill" class="swiperImg"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-itemn">
					<image src="../../static/sp/7.jpg" mode="aspectFill" class="swiperImg"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-itemn">
					<image src="../../static/sp/8.jpg" mode="aspectFill" class="swiperImg"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-itemn">
					<image src="../../static/sp/9.jpg" mode="aspectFill" class="swiperImg"></image>
				</view>
			</swiper-item>
		</swiper>
		</view>
		<!-- <view class="announcementBox">
			<image src="../../static/img/ico-notice.png" mode="" class="announcementIcon"></image>
			<marquee class="announcementTxt" direction="left" behavior="scroll" scrollamount="5">
				{{noticeTxt}}
			</marquee>
		</view> -->
		<view class="announcementBox announcementBox2" v-if="noticedata.noticeType==2&&noticedata.status==0">
			<view class="noticeTitleBoz">
				<image src="../../static/img/ico-notice.png" mode="" class="announcementIcon"></image>
				<view class="noticeTitle">{{noticeTxt}}</view>
			</view>
			<view class="noticeContent" v-html="noticeContent"></view>

		</view>
		<view class="cont">
			<view class="title">提货券兑换</view>
			<view class="line">
				<input type="text" class="lineInput" v-model="cardNo" placeholder="请输入提货券编号" @input="inputChange">
			</view>
			<view class="line">
				<input type="text" class="lineInput" v-model="cardPsd" placeholder="请输入提货券密码" @input="inputChange">
			</view>
		</view>
		<view class="liuBox">
			<liu-slider-verify ref="verify" @change='change'></liu-slider-verify>
		</view>
		
		<view class="SubmitBtnBOx">
			<view class="SubmitBtn" @click="Submit">确认提交</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardNo:'',
				verification:false,
				cardPsd:'',
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				noticeTxt:'',
			    noticeContent:'',
				noticedata:'',
			}
		},
		onLoad(opt) {
           this.notice()
		   if(opt.cardNo){
			   this.cardNo=opt.cardNo
		   }
		},
		onShow() {
			this.reset()
		},
		methods: {
            Submit(){
				if(!this.cardNo){
					uni.showToast({
						 title: '请输入提货券编号',
						 icon:'none',
						 duration: 3000
					});
					return false
				}
				if(!this.cardPsd){
					uni.showToast({
						 title: '请输入提货券密码',
						 icon:'none',
						 duration: 3000
					});
					return false
				}
				if(!this.verification){
					uni.showToast({
						 title: '请完成右滑验证',
						 icon:'none',
						 duration: 3000
					});
					return false
				}
				uni.showLoading({
					title: '加载中'
				});
				this.$http('delivery/card/one',{
					cardPsd:this.cardPsd,
					cardNo:this.cardNo,
					noPsd:false,
				},'GET').then(res => {
					    uni.hideLoading();
					   
						if(!res.data){
							/* uni.showToast({
								 title: '请输入正确的劵码或密码',
								 icon:'none',
								 duration: 3000
							}); */
							uni.showToast({
								 title: res.msg,
								 icon:'none',
								 duration: 3000
							})
						}else{
							if(res.data.cardStatus == 2 || res.data.cardStatus == 3){
								if(res.data.cardType.cardExchangeMode==1&&res.data.cardType.cardExchangeUseTotal&&res.data.cardType.orderType!=0){
									if(res.data.cardType.cardExchangeMode==1){
										var cardExchangeTotal= Number(res.data.cardType.cardExchangeTotal)
										var cardExchangeUseTotal= Number(res.data.cardType.cardExchangeUseTotal)
										console.log(cardExchangeTotal)
										console.log(cardExchangeUseTotal)
										if(cardExchangeUseTotal<cardExchangeTotal){
											uni.navigateTo({
												url: 'confirm?cardId='+res.data.cardId+'&cardExchangeMode='+res.data.cardType.cardExchangeMode+'&cardExchangeTotal='+res.data.cardType.cardExchangeTotal+'&cardExchangeUseTotal='+res.data.cardType.cardExchangeUseTotal+'&orderType='+res.data.cardType.orderType+'&cardTypeName='+res.data.cardType.cardTypeName
											}); 
										}else{
											 uni.navigateTo({
												url: 'orderList?cardNo='+this.cardNo
											}); 
										}
									}else{
										 uni.navigateTo({
											url: 'orderList?cardNo='+this.cardNo
										}); 
									}
									
								}else{
									if(res.data.cardType.cardExchangeMode==2){
										uni.setStorage({
												key: 'cardConfig',
												data: res.data.cardType.cardConfig,
												 success: function () {	
															
												 }
										});
									}
									uni.navigateTo({
										url: 'confirm?cardId='+res.data.cardId+'&cardExchangeMode='+res.data.cardType.cardExchangeMode+'&cardExchangeTotal='+res.data.cardType.cardExchangeTotal+'&cardExchangeUseTotal='+res.data.cardType.cardExchangeUseTotal+'&orderType='+res.data.cardType.orderType+'&cardTypeName='+res.data.cardType.cardTypeName
									}); 
								}
								
							}else {
								if(res.data.cardType.orderType==2){
									uni.showToast({
										 title: '该券码已兑换',
										 icon:'none',
										 duration: 3000
									});
								}else{
									uni.showToast({
										 title: '该券码不能兑换',
										 icon:'none',
										 duration: 3000
									});
								}
								
							}
							
						}
				 })
				
			},
			change(e){
				console.log(e)
				this.verification=e.state
			},
			inputChange(){
				this.reset()
			},
			//重置
			reset() {
				this.$refs.verify.initialization()
			},
			notice(){
				this.$http('system/notice/list',{
					pageNum:1,pageSize:10,
					status:0,noticeType:2,
				},'GET').then(res => {
					   this.noticeTxt=res.rows[0].noticeTitle
					    this.noticeContent=res.rows[0].noticeContent
						this.noticedata=res.rows[0]
				 })
			}
		}
	}
</script>

<style scoped>
	.spwBox{
		height: 400rpx;
	}
	.swiperImg{
		width: 100%;
		height: 400rpx;
	}
	.swiper{
		height: 400rpx;
	}
	.cont{
		background: #fff;
		padding: 20rpx;
	}
	.title{
		color: #333333;
		font-size: 30rpx;
		border-bottom: #eeeeee 1px solid;
		padding-bottom: 20rpx;
	}
	.lineInput{
		height: 80rpx;line-height: 80rpx;
		padding-left: 20rpx;
		border: 1px solid #D7D7D7;
		border-radius: 10rpx;
		font-size: 28rpx;
	}
	.line{
		padding: 20rpx 0;
	}
	.SubmitBtn{
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 30rpx;
		background: #D53533;
		color: #fff;
		margin-top: 50rpx;
		border-radius: 10rpx;
	}
	.SubmitBtnBOx{
		padding: 20rpx;
	}
	.announcementIcon{
		width: 30rpx;height: 30rpx;
	}
	.announcementBox{
		
		margin: 20rpx;
		    border: #e27364 2px dotted;
			padding: 20rpx;
	}
	.noticeTitle{
		line-height: 30rpx;
		font-size: 28rpx;
		color: #D53533;
		width: 600rpx;
		padding-left: 16rpx;
	}
	.announcementBox2{
		
	}
	.noticeTitleBoz{
		display: flex;justify-content: center;
	}
	.announcementTxt{
		line-height: 30rpx;
		padding-left: 10rpx;
	}
	.liuBox{
		padding: 30rpx;
	}
	.noticeContent{
		padding-top: 10rpx;
		color: #999;
		font-size: 26rpx;
	}
</style>
